import { defineComponent, reactive } from 'vue'
import MessageBox from '@/components/nComponents/MessageBox'
import { NButton, NSpin } from 'naive-ui'
import pageStyle from './styles/del.module.scss'

export default defineComponent({
  emits: ['confirm'],
  setup(_, { expose, emit }) {
    const state = reactive({
      delShow: false,
      delLoading: false
    })
    const handConfirm = () => {
      state.delLoading = true
      emit('confirm')
    }
    const close = () => {
      closeLoading()
      state.delShow = false
    }
    const closeLoading = () => {
      state.delLoading = false
    }
    const open = () => {
      state.delShow = true
    }
    expose({
      open,
      close,
      closeLoading
    })
    const boxSlot = {
      header: () => (
        <div>
          <div class='title'>温馨提示</div>
        </div>
      ),
      default: () => (
        <>
          <div class={pageStyle.delBox}>
            <div class='con'>
              <i class='esayIcon esayIcon-jinggao'></i>
              <span class='tip'>确认要删除选中数据吗?</span>
            </div>
            <div class='btns'>
              <NButton
                secondary
                onClick={() => {
                  state.delShow = false
                }}
              >
                取消
              </NButton>
              <NButton
                style={{ marginLeft: '10px' }}
                type='primary'
                onClick={handConfirm}
              >
                {state.delLoading && (
                  <NSpin
                    style='margin-right: 5px'
                    size={15}
                    stroke='#fff'
                    v-slots={{
                      icon: () => (
                        <i
                          class='esayIcon esayIcon-a-jiazaizhongdaxiao'
                          style='color: #fff;'
                        />
                      )
                    }}
                  />
                )}
                <span>确认删除</span>
              </NButton>
            </div>
          </div>
        </>
      )
    }
    return () => (
      <MessageBox
        width={'400px'}
        v-model={state.delShow}
        isClose={false}
        v-slots={boxSlot}
      />
    )
  }
})
